import { SvgIcon } from '@/components/icon';
import { useCopyToClipboard } from '@/hooks/event/use-copy-to-clipboard';
import { cn } from '@/utils/cn-merge';
import { App } from 'antd';

interface Props {
  text: string;
  icon?: React.ReactNode;
  copyText?: string;
  className?: string;
  copyClassName?: string;
  onCopy?: () => void;
}

export const CopyLabel = ({ icon, text, copyText, className, copyClassName, onCopy }: Props) => {
  const { message } = App.useApp();
  const { copyToClipboard } = useCopyToClipboard();
  const handleCopy = async () => {
    if (onCopy) {
      onCopy();
    }
    await copyToClipboard(text);
    message.success('复制成功');
  };

  return (
    <div
      className={cn(
        'flex items-center justify-between gap-2 rounded-md border-[1px] border-line-2 bg-fill-2 px-3 py-1',
        className,
      )}
    >
      <div className="min-w-0 flex-1">
        <span className="whitespace-pre-wrap break-words text-cn-14 leading-relaxed text-text-5">
          {text}
        </span>
      </div>
      <div
        className={cn(
          'flex h-full flex-shrink-0 cursor-pointer items-center gap-2 text-@brand-color hover:text-@brand-color-hover active:text-@brand-color-active',
          copyClassName,
        )}
        onClick={handleCopy}
      >
        {icon ? icon : <SvgIcon icon={'copy'} />}
        <span>{copyText ?? '复制'}</span>
      </div>
    </div>
  );
};
